<template>
	<div class="flocoentmin">
		<header>
			<i class="iconfont lt" @click="goback">&#xe613;</i>
			<span>商品详情</span>
			<router-link to="/car"><i class="iconfont rt">&#xe665;</i></router-link>	
		</header>
		<swipe class="my-swipe">
		    <swipe-item v-for="(item,index) in detailarr.swiper"><img :src="item"></swipe-item>
		</swipe>
		<div class="detailcon">
			<p class="tit">{{detailarr.havetext}}</p>
			<div class="dec">
				<p ref="delp">{{detailarr.p}}</p>
				<h5 ref="psmall">{{detailarr.psmall}}</h5>
				<h3 ref="price">{{detailarr.price}}</h3>
			</div>
			<ul class="decsimg">
				<li v-for="item in detailarr.images"><img :src="item" ref="imgsrc"></li>
			</ul>
			<footer>
				<a class="a1">
					<i class="iconfont">&#xe611;</i>
					<span>客服</span>
				</a>
				<a class="a2">
					<i class="iconfont">&#xe675;</i>
					<span>收藏</span>
				</a>
				<a class="a3" @click="addcar">
					<i class="iconfont">&#xe616;</i>
					<span v-text="btntext">加入购物车</span>
				</a>
				<a class="a4">
					<i class="iconfont">￥</i>
					<span>立即购买</span>
				</a>
			</footer>
		</div>
		<detaillove></detaillove>
		
	</div>
</template>
<style type="text/css" lang="less">
.Foot{
	display: none;
}
@import 'vue-swipe/dist/vue-swipe.css';
.flocoentmin{
	header{
	position: fixed;
	height: 40px;
	line-height: 40px;
	background:rgba(255,255,255,.3);
	width: 100%;
	z-index: 99;
	color: #43CD80;
	i{
		font-size: 20px;
		margin: 0 10px;
		color: #008B8B;
	}
	span{
		font-size: 16px;
		color: #949494;
	}
}
.my-swipe {
  height: 320px;
  img{
  	width: 100%;
  	height: 100%;
  }
  .is-active{
  	background:	#00CDCD;
  }
}
/*.swiper2-container{
	height: 320px;
	width: 100%;
	overflow: hidden;
	.swiper-wrapper{
		width: auto;
	}
	img{
		height: 100%;
		width: 100%;
	}
}*/
.detailcon{
	.tit{
		background-color: #E0EEE0;
		color:#C4C4C4;
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
	}
	.dec{
		text-align: center;
		 p{
		 	font-size: 14px;
		 	color: #000;
		 	padding: 6px 4px;
			 }
			 h5{
			 	font-size: 12px;
			 	font-weight: normal;
			 	padding: 2px 4px;
			 	color: #008B8B;
			 }
			 h3{
			 	color: #AEEEEE;
			 	padding: 4px 4px;
			 	font-weight: normal;
			 }
	}
	.decsimg li{
		padding: 10px 10px;
		height: auto;
		text-align: center;
		img{
			width: 100%;
		}
	}
}

	footer{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9999;
		height: 52px;
		display: flex;
		background: #fff;
		a{
			display: flex;
			flex-direction: column;
			flex: 1;
			align-items: center;
			justify-content: center;
			i{
				font-size: 20px;
				position: relative;
			}
			span{
				margin: 2px 0;
				font-size: 12px;
			}
		}
		.a1{
			i{
				color: #008B8B;
			}
		}
		.a2{
			i{
				color: #FF7F24;
			}
		}
		.a3{
			background: #FF4500;
			span,i{
				color: #fff;
			}
		}
		.a4{
			color: #fff;
			background: #66CDAA;
		}
	}
}

	
</style>

<script type="text/javascript">
	import detaillove from '../detaillove'
	import {mapState} from 'vuex'
	import {mapGetters} from 'vuex'
	export default{
		data(){
			return{
				detailarr:{},
				btntext:"添加购物车",
				delel:{}
			}
		},
		components:{
			detaillove
		},
		computed:{
			...mapGetters(['goods'])
		},
		methods:{
			getData(id){
				var _this=this;
				_this.$http.get('../../static/data/floconmin.json').then(function(res){
					_this.detailarr=res.data[id];
				}).catch(function(err){
					console.log(err)
				})
			},
			goback(){
				this.$router.go(-1);
			},
			addcar(){
				this.btntext="已添加";
				this.delel.delp=$(this.$refs.delp).html()
				this.delel.psmall=$(this.$refs.psmall).html()
				this.delel.price=$(this.$refs.price).html().slice(1)
				this.delel.imgsrc=$(this.$refs.imgsrc).attr("src");
				this.delel.num=1;
				this.goods.push(this.delel)
				this.delel.id=this.goods.length-1;
			}
		},
		mounted(){	  
		  var reg=/\/flocoentmin\/(\d+)/;
          var id = this.$route.path.match(reg)[1]
          this.getData(id);          
		}
	}
</script>